<template>
    <el-dialog v-model="state.show" :title="state.title" width="400px" @closed="onClosed">
        <el-form ref="formRef" :model="form" :rules="rules">
            <el-form-item>
                <el-radio-group v-model="form.statusType">
                    <el-radio :label="1">通过</el-radio>
                    <el-radio :label="2">驳回</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item v-if="form.statusType === 2" prop="statusRejectReason">
                <el-input
                    maxlength="200"
                    v-model.trim="form.statusRejectReason"
                    type="textarea"
                    :autosize="{ minRows: 4 }"
                    resize="none"
                    placeholder="请输入驳回原因"
                    show-word-limit />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="state.show = false">取消</el-button>
            <el-button type="primary" :disabled="!form.statusType" @click="onConfirm(formRef)"> 确定 </el-button>
        </template>
    </el-dialog>
</template>

<script setup>
import request from '@/request';
import { ElMessage } from 'element-plus';
import { reactive, ref, watch } from 'vue';

const props = defineProps({
    modelValue: { type: Boolean, default: false },
    data: { type: Object, default: () => ({}) }
});

const emit = defineEmits(['update:modelValue', 'confirm']);

const titleConst = {
    merchantSatus: '开店审核',
    identStatus: '认证审核'
};
const state = reactive({
    show: false,
    title: '',
    auditType: 'merchantSatus',
    tenantId: '',
    identId: ''
});

const formRef = ref(null);
const form = reactive({
    statusType: '', //'审核类型 1-通过 2-驳回',
    statusRejectReason: '' // 驳回原因
});
const rules = {
    statusRejectReason: [{ required: true, message: '请输入驳回原因', trigger: ['blur', 'change'] }]
};

const onClosed = () => {
    emit('update:modelValue', false);
    form.statusType = '';
    form.statusRejectReason = '';
};

// 入参处理
const getParams = () => {
    let params = { tenantId: +state.tenantId };
    if (state.auditType === 'identStatus') {
        params.status = form.statusType;
        params.identId = state.identId;
        if (form.statusType === 2) params.rejectReason = form.statusRejectReason;
    } else {
        params.statusType = form.statusType;
        if (form.statusType === 2) params.statusRejectReason = form.statusRejectReason;
    }
    return params;
};

const onConfirm = async formEl => {
    if (!formEl) return;
    await formEl.validate();
    const params = getParams();
    if (state.auditType === 'merchantSatus') {
        await request('merchantauditServ', params);
    } else {
        await request('tenantIdent', params);
    }
    const message = '审核成功';
    ElMessage.success(message);
    state.show = false;
    emit('confirm');
};
watch(
    () => props.modelValue,
    v => {
        if (v) {
            Object.assign(state, props.data);
            state.title = titleConst[state.auditType];
            state.show = true;
        }
    }
);
</script>
<style lang="scss" scoped>
:deep(.el-form-item__error) {
    margin-top: 4px;
}
</style>
